<template>
  <div class="contant">
    <div class="top">
      <div class="top-num-box">
        <div class="num-box" v-for="(item,index) in num" :key="index">{{ item }}</div>
      </div>
      <div class="bottom-bg">
        <div class="title">当前用户数</div>
      </div>
    </div>
    <div style="height: 410px;" id="chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import uploadedDataURL from '../utils/map.json'

export default {

  data() {
    return {
      num: [1, 6, 9, 8, 0],
    }
  },
  mounted() {
    this.into()
  },
  methods: {
    into() {
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom);

      var data = [{
        name: '北京',
        value: 199,
        value1: 123,
        value2: 236,
      },
        {
          name: '天津',
          value: 542,
          value1: 123,
          value2: 236,
        },
        {
          name: '山西',
          value: 881,
          value1: 123,
          value2: 236,
        },
        {
          name: '内蒙古',
          value: 457,
          value1: 123,
          value2: 495,
        },
        {
          name: '辽宁',
          value: 657,
          value1: 123,
          value2: 236,
        },
        {
          name: '河北',
          value: 167,
          value1: 123,
          value2: 236,
        },
        {
          name: '台湾',
          value: 490,
          value1: 123,
          value2: 236,
        },
        {
          name: '黑龙江',
          value: 167,
          value1: 123,
          value2: 236,
        },
        {
          name: '吉林',
          value: 267,
          value1: 123,
          value2: 236,
        },
        {
          name: '陕西',
          value: 367,
          value1: 123,
          value2: 654,
        },
        {
          name: '甘肃',
          value: 567,
          value1: 123,
          value2: 654,
        },
        {
          name: '宁夏',
          value: 627,
          value1: 123,
          value2: 654,
        },
        {
          name: '青海',
          value: 677,
          value1: 123,
          value2: 654,
        },
        {
          name: '新疆',
          value: 0,
          value1: 564,
          value2: 395,
        },
        {
          name: '西藏',
          value: 1,
          value1: 123,
          value2: 154,
        },
        {
          name: '四川',
          value: 637,
          value1: 123,
          value2: 154,
        },
        {
          name: '重庆',
          value: 647,
          value1: 123,
          value2: 154,
        },
        {
          name: '山东',
          value: 617,
          value1: 123,
          value2: 154,
        },
        {
          name: '河南',
          value: 607,
          value1: 123,
          value2: 154,
        },
        {
          name: '江苏',
          value: 167,
          value1: 123,
          value2: 154,
        },
        {
          name: '安徽',
          value: 267,
          value1: 123,
          value2: 154,
        },
        {
          name: '湖北',
          value: 367,
          value1: 123,
          value2: 136,
        },
        {
          name: '浙江',
          value: 567,
          value1: 123,
          value2: 136,
        },
        {
          name: '福建',
          value: 867,
          value1: 123,
          value2: 136,
        },
        {
          name: '江西',
          value: 967,
          value1: 46,
          value2: 136,
        },
        {
          name: '湖南',
          value: 267,
          value1: 46,
          value2: 136,
        },
        {
          name: '贵州',
          value: 167,
          value1: 46,
          value2: 136,
        },
        {
          name: '云南',
          value: 367,
          value1: 46,
          value2: 136,
        },
        {
          name: '广东',
          value: 467,
          value1: 46,
          value2: 136,
        },
        {
          name: '广西',
          value: 167,
          value1: 46,
          value2: 136,
        },
        {
          name: '海南',
          value: 567,
          value1: 164,
          value2: 136,
        },
        {
          name: '上海',
          value: 667,
          value1: 164,
          value2: 136,
        },
      ];

      echarts.registerMap('china', uploadedDataURL);
      var option = {
          // backgroundColor:'#000',
          // backgroundColor:'#000',
          backgroundColor: '#0F1C3C',
          tooltip: {
            trigger: 'item',
            formatter: function (parms) {
              var str = parms.name + "</br>" +
                // parms.marker + "" + parms.data.name + "</br>" +
                " 能源站：" + parms.data.value + "</br>" +
                "供暖个数：" + parms.data.value1 + "</br>" +
                "供暖面积：" + parms.data.value2 + "万㎡";
              return str;
            },
            // formatter: function(params) {
            //     if (params.data.value.length > 1) {
            //         return params.data.name + "：" + params.data.value[2] + "人"
            //     } else {
            //         return params.data.name + "：" + params.data.value + "人"
            //     }
            // },
            extraCssText: 'font-size:18px;'
          },
          geo: {
            map: 'china',
            roam: false,
            scaleLimit: {
              min: 1,
              max: 1.2
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    // color: 'rgba(0, 252, 255, 0)' // 0% 处的颜色
                    color: '#073684' // 0% 处的颜色
                  }, {
                    offset: 1,
                    // color: 'rgba(0, 252, 255, 0)' // 100% 处的颜色
                    color: '#061E3D' // 100% 处的颜色
                  }],
                },
                //   borderWidth: 3,
                shadowColor: 'rgba(10,76,139,1)',
                // shadowOffsetY: 0,
                // shadowBlur: 60,
                // borderColor: '#A39039' //描边颜色
              },
            },
            top: 30,
          },
          visualMap: {
            type: "piecewise",
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#0D2434', '#00CC99', '#DCB222']
            },
            pieces: [
              {
                min: 0,
                max: 0.5,
                label: ' ',
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 0,
                  [{
                    offset: 0,
                    color: 'rgba(212,242,231,0.6)'
                  },
                    {
                      offset: 0.6,
                      color: 'rgba(0,191,255,0.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,255,255,0.4)'
                    }
                  ]
                )
              },
              {
                min: 0.5,
                max:null,
                label: ' ',
                color:{
                    type: 'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:
                      [{
                        offset: 0,
                        color: 'rgba(0,191,255,0.3)' // 0% 处的颜色
                      }, {
                        offset: 0.6,
                        color: 'rgba(0,191,255,0.4)'
                      }, {
                        offset: 1,
                        color: 'rgba(135,206,250, 0.8)' // 100% 处的颜色
                      }],
                    globalCoord:
                      false // 缺省为 false
                  }
              }
            ],
            itemSymbol: '',
            itemWidth:
              15,
            itemHeight:
              15,
            bottom:
              '7%',
            right:
              '5%',
            textStyle:
              {
                color: '#ffffff',
                fontSize:
                  16,
              }
            ,
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke'
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(135,206,250,0.1)'
                  }, {
                    offset: 0.3,
                    color: 'rgba(135,206,250,0.1)'
                  }, {
                    offset: 1,
                    color: 'rgba(135,206,250,0.6)'
                  }],
                  global: false // 缺省为 false
                },
                borderWidth: 0,
                borderColor: '#b4dccd'
              }

            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 0,0, 0.3)' // 0% 处的颜色
                  }, {
                    offset: 0.3,
                    color: 'rgba(153,168,166,0.5)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 255, 0.8)' // 100% 处的颜色
                  }],
                  global: false
                },
                borderWidth: 0,
                borderColor: '#b4dccd',
              }

            },
            label: {
              normal: {
                show: false,
                // color: '#fff',
                // fontWeight: 'bold',
                // position: 'inside',
                formatter: function (para) {
                  return '{cnNum|' + para.data.value[2] + '}'
                  // + '{txtFontsize|人}'
                },
                rich: {
                  cnNum: {
                    fontSize: 19,
                    fontWeight: 'bold',
                    color: '#fff',
                  },
                  txtFontsize: {
                    fontSize: 8,
                    color: '#fff'
                  }
                }
              },
              emphasis: {
                formatter: function (para) {
                  return '{cnNum|' + para.data.value[2] + '}' +
                    '{txtFontsize|人}'
                },
                rich: {
                  cnNum: {
                    fontSize: 10,
                    fontWeight: 'bold',
                    color: '#fff',
                  },
                  txtFontsize: {
                    fontSize: 8,
                    color: '#fff'
                  }
                }
              }
            },
            zlevel: 3,
          },

            {
              type: 'map',
              map: 'china',
              rippleEffect: {
                brushType: 'stroke'
              },
              scaleLimit: {
                min: 1,
                max: 1.2
              },
              label: {
                normal: {
                  show: false, // 地图上显示的名称
                  color: '#fff', //字的颜色
                  fontSize: 10,
                },
                emphasis: {
                  show: false,
                  color: '#fff',
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(81,98,31,1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(0,0,0,0.6)' // 100% 处的颜色
                  }],
                }
              },
              itemStyle: {
                normal: {
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(0, 252, 255, 0.5)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(0, 252, 255, 0.3)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  // borderColor: '#A39039', //描边颜色
                  borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00F6FF'
                  }, {
                    offset: 1,
                    color: '#53D9FF'
                  }], false),
                },

              },
              emphasis: {
                normal: {
                  label: {
                    show: false,
                    color: "#53e5ce"
                  }
                },
                itemStyle: {
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      // color: 'rgba(0, 252, 255, 1)' // 0% 处的颜色
                      color: '#073684' // 0% 处的颜色
                    }, {
                      offset: 1,
                      // color: 'rgba(0, 252, 255, 0.5)' // 100% 处的颜色
                      color: '#061E3D' // 100% 处的颜色
                    }],
                  },

                }
              },
              z: 2,
              top: 30,
              data: data
            }
          ]
        }
      ;
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.contant {

  .top {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;

    .top-num-box {
      display: flex;
      align-content: center;
      justify-content: center;
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;

      .num-box {
        background-image: url("../assets/images/num-box.png");
        background-size: cover;
        background-repeat: no-repeat;
        width: 76px;
        height: 90px;
        line-height: 90px;
        margin-right: 10px;
        margin-bottom: 20px;
        display: flex;
        align-content: center;
        justify-content: center;
        font-size: 72px;
        color: #FFFFFF;
      }
    }

    .bottom-bg {
      background-image: url("../assets/images/num_bg.png");
      background-size: cover;
      background-repeat: no-repeat;
      width: 592px;
      height: 70px;
      margin: 78px auto 0;
      position: relative;
      display: flex;
      justify-content: center;

      .title {
        position: absolute;
        bottom: 0;
        font-size: 18px;
        color: #FFFFFF;
        display: flex;
        justify-content: center;

      }
    }
  }
}
</style>
